<template>
  <div class="inviteDetail">
    <van-nav-bar @click-left="$router.back()" left-arrow title="详细在线简历" fixed>
    </van-nav-bar>
    <div class="content">
      <div class="jibenmsg">
        <div class="jibenmsg-content">
          <div class="title">
            <div class="left">
              <span>|</span>
              <h2>基本信息</h2>
            </div>
            <div class="zhankaiheshousuo" @click="zhankaishousuo1">
              <span v-if="hide1">
                收起
                <img src="../../assets/images/invite/shouqi.png" alt="">
              </span>
              <span v-else>
                展开
                <img src="../../assets/images/invite/xiangxia.png" alt="">
              </span>
            </div>
          </div>
          <div class="contents" v-show="zksu1">
            <div class="contents-form">
              <van-cell-group>
                <van-field v-model="jbform.name" readonly placeholder="点击填写" type="text" label="姓名">
                </van-field>
                <van-field v-model="jbform.idNumber" readonly placeholder="点击填写" type="text" label="身份证号码">
                </van-field>
                <van-field v-model="jbform.sex" readonly clickable label="性别" placeholder="点击选择" >
                </van-field>
                <van-field v-model="jbform.chushentime" label="出生年月" readonly placeholder="点击选择">
                </van-field>
                <van-field v-model="jbform.jiguan" readonly label="籍贯" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.mingzu" readonly label="民族" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.huiyinzk" readonly clickable  label="婚姻状况" placeholder="点击选择">
                </van-field>
                <van-field v-model="jbform.height" readonly label="身高" placeholder="点击输入">
                </van-field> 
                <van-field v-model="jbform.weight" readonly label="体重" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.politicalStatus" readonly label="政治面貌" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.qqNumber" readonly label="QQ号码" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.wxNumber" readonly label="微信号码" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.phone" readonly label="手机号码" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.accountAddress" readonly label="户口详细地址" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.detailedAddress" readonly label="现居详细地址" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.biyeSchool" readonly label="毕业院校" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.biyeTime" readonly label="毕业时间"  @click="show5 = true" placeholder="点击选择">
                </van-field>
                <van-field v-model="jbform.education" readonly label="学历" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.certificate" readonly label="证书" placeholder="点击输入">
                </van-field>
                <van-field v-model="jbform.computerSp" readonly clickable  label="计算机水平" placeholder="点击选择" >
                </van-field>
                <van-field v-model="jbform.waiyuSp" readonly clickable label="外语水平" placeholder="点击选择">
                </van-field>
              </van-cell-group>
            </div>
          </div>
        </div>

        <div class="jibenmsg-contents" v-for="(item,index) in jbform.jiating" style="margin-top:260px" :key="index">
          <div class="title">
            <div class="left">
              <span>|</span>
              <h2>家庭成员</h2>
            </div>
            <div class="zhankaiheshousuo">
              <div class="imgs" @click="zhankaishousuo2">
                <span v-if="hide2">
                  收起
                  <img src="../../assets/images/invite/shouqi.png" alt="">
                </span>
                <span v-else>
                  展开
                  <img src="../../assets/images/invite/xiangxia.png" alt="">
                </span>
              </div>
              <span @click="deletes(index)" style="padding-right:10px" v-if="index>0">
                <van-icon name="cross" />
              </span>
            </div>
          </div>
          <div class="contents" v-show="zksu2">
            <div class="contents-form">
              <van-cell-group>
                <div>
                  <van-field v-model="item.name" readonly placeholder="点击填写" type="text" label="姓名">
                  </van-field>
                  <van-field v-model="item.relation" readonly placeholder="点击填写" type="text" label="关系">
                  </van-field>
                  <van-field v-model="item.age" readonly label="年龄" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.profession" readonly label="职业" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.phone" readonly label="联系电话" placeholder="点击选择">
                  </van-field>
                </div>
              </van-cell-group>
            </div>
          </div>
        </div>

        <div class="jibenmsg-contentss" v-for="(item,indexs) in jbform.jiaoyubeijing" style="margin-top:20px" :key="indexs+'list'">
          <div class="title">
            <div class="left">
              <span>|</span>
              <h2>教育背景</h2>
            </div>
            <div class="zhankaiheshousuo">
              <div class="imgs" @click="zhankaishousuo3">
                <span v-if="hide3">
                  收起
                  <img src="../../assets/images/invite/shouqi.png" alt="">
                </span>
                <span v-else>
                  展开
                  <img src="../../assets/images/invite/xiangxia.png" alt="">
                </span>
              </div>
            </div>
          </div>
          <div class="contents" v-show="zksu3">
            <div class="contents-form">
              <van-cell-group>
                <div>
                  <van-field v-model="item.startTime" readonly label="开始年月" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.endTime" readonly label="结束年月" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.school" readonly placeholder="点击填写" type="text" label="学校">
                  </van-field>
                  <van-field v-model="item.major" readonly label="专业" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.fullTime" readonly clickable label="是否全日制" placeholder="点击选择">
                  </van-field>
                </div>
              </van-cell-group>
            </div>
          </div>
        </div>

        <div class="jibenmsg-contentss" v-for="(item,indexs) in jbform.gongzuojingli" style="margin-top:20px" :key="indexs+'lists'">
          <div class="title">
            <div class="left">
              <span>|</span>
              <h2>工作经历</h2>
            </div>
            <div class="zhankaiheshousuo" @click="zhankaishousuo4">
              <span v-if="hide4">
                收起
                <img src="../../assets/images/invite/shouqi.png" alt="">
              </span>
              <span v-else>
                展开
                <img src="../../assets/images/invite/xiangxia.png" alt="">
              </span>
            </div>
          </div>
          <div class="contents" v-show="zksu4">
            <div class="contents-form">
              <van-cell-group>
                <div>
                  <van-field v-model="item.startTime"  label="开始年月"  readonly placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.endTime" label="结束年月"  readonly placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.companyName" readonly placeholder="点击填写" type="text" label="就职企业">
                  </van-field>
                  <van-field v-model="item.superiorName" readonly label="上级姓名" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.superiorPhone" readonly label="上级手机号" placeholder="点击选择">
                  </van-field>
                  <van-field v-model="item.resignationReason" readonly rows="2" autosize label="离职原因" type="textarea" maxlength="350" placeholder="点击输入" show-word-limit>
                  </van-field>
                </div>
              </van-cell-group>
            </div>
          </div>
        </div>

        <div class="jibenmsg-contentss">
          <div class="title">
            <div class="left">
              <span>|</span>
              <h2>自我评价</h2>
            </div>
            <div class="zhankaiheshousuo" @click="zhankaishousuo5">
              <span v-if="hide5">
                收起
                <img src="../../assets/images/invite/shouqi.png" alt="">
              </span>
              <span v-else>
                展开
                <img src="../../assets/images/invite/xiangxia.png" alt="">
              </span>
            </div>
          </div>
          <div class="contents" v-show="zksu5">
            <div class="contents-form">
              <van-cell-group>
                <div>
                  <van-field v-model="jbform.ziwoPrice" readonly rows="8" autosize type="textarea" maxlength="350" placeholder="点击填写" show-word-limit />
                </div>
              </van-cell-group>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
          //展开和收缩状态   
      hide1:true,
      zksu1:true,
      hide2:true,
      zksu2:true,
      hide3:true,
      zksu3:true,
      hide4:true,
      zksu4:true,
      hide5:true,
      zksu5:true,
      hide6:true,
      zksu6:true,
      hide7: true,
      zksu7: true,
      code: "",
      files:{},//上传的文件信息
   
      jbform: {
        accountAddress: "",//户口详细地址
        detailedAddress: "",//现居详细地址
        graduate: "",//毕业院校
        name: "",//姓名
        jiguan: "",//籍贯
        mingzu: "",//民族
        checked: "1",
        speciality:"",//业余特长
        biyeSchool: "",//毕业院校
        chushentime: "",//出身日期
        sex: "",//性别
        height: "",//身高
        weight: "",//体重
        politicalStatus: "",//政治面貌
        qqNumber: "",//qq
        huiyinzk: "",//婚姻状况
        computerSp: "",//计算机水平
        waiyuSp: "",//外语水平
        biyeTime: "",//毕业时间
        ziwoPrice: "",//自我评价
        phone: "",//手机号
        certificate: "",//证书
        hobby: "",//业余爱好
        education: "",//学历
        idNumber: "",//身份证号
        wxNumber: "",//微信号
        // 家庭成员
        jiating: [{
          name: "",
          relation: "",
          age: "",
          profession: "",
          phone: ""
        }],
        // 教育背景
        jiaoyubeijing: [{
          startTime: "",
          endTime: "",
          school: "",
          major: "",
          fullTime: ""
        }],
        // 工作经历
        gongzuojingli:[
          {
          startTime: "",
          endTime: "",
          companyName: "",
          superiorName: "",
          superiorPhone: "",
          resignationReason: ""
        }
        ]
      },
    
    }
  },
  mounted(){
      this.getCustomerInfo(this.$route.query.id);
  },
  methods: {
     // 展开和收缩
    zhankaishousuo1(){
       this.hide1=!this.hide1
       this.zksu1=!this.zksu1
    },
    zhankaishousuo2(){
       this.hide2=!this.hide2
       this.zksu2=!this.zksu2
    }, 
    zhankaishousuo3(){
       this.hide3=!this.hide3
       this.zksu3=!this.zksu3
    }, 
    zhankaishousuo4(){
       this.hide4=!this.hide4
       this.zksu4=!this.zksu4
    }, 
    zhankaishousuo5(){
       this.hide5=!this.hide5
       this.zksu5=!this.zksu5
    }, 
    zhankaishousuo6(){
       this.hide6=!this.hide6
       this.zksu6=!this.zksu6
    },  
    zhankaishousuo7 () {
      this.hide7 = !this.hide7
      this.zksu7 = !this.zksu7
    },
     getCustomerInfo (id) {
        this.$api.getCustomerInfo({id:id}).then(res=>{
          this.jbform.name=res.data.name
          this.jbform.idNumber=res.data.idCard
          this.jbform.sex=res.data.gender
          this.jbform.chushentime=res.data.birth
          this.jbform.jiguan=res.data.nativePlace
          this.jbform.mingzu=res.data.nation
          this.jbform.huiyinzk=res.data.marriage
          this.jbform.height=res.data.height
          this.jbform.weight=res.data.weight
          this.jbform.politicalStatus=res.data.politicalStatus
          this.jbform.qqNumber=res.data.qqNumber
          this.jbform.wxNumber=res.data.weChatNo
          this.jbform.phone=res.data.phone
          this.jbform.hobby=res.data.interests
          this.jbform.speciality=res.data.speciality
          this.jbform.accountAddress=res.data.accountAddress
          this.jbform.detailedAddress=res.data.accountAddress
          this.jbform.biyeSchool=res.data.graduate
          this.jbform.biyeTime=res.data.graduateTime
          this.jbform.education=res.data.education
          this.jbform.certificate=res.data.certificate
          this.jbform.computerSp=res.data.computers
          this.jbform.waiyuSp=res.data.foreignLanguages
          this.jbform.jiating=res.data.crmFamilyMember
          if(res.data.crmFamilyMember.length===0){
             this.jbform.jiating.push({
                name: "",
                relation: "",
                age: "",
                profession: "",
                phone: ""
            })
            return
          }else{
            this.jbform.jiating=res.data.crmFamilyMember
          }
          this.jbform.gongzuojingli=res.data.crmWorkExperienceEntity
          this.jbform.ziwoPrice=res.data.remark
          if(res.data.crmPersonnelEducationEntity.length===0){
             this.jbform.jiaoyubeijing.push({
                  startTime: "",
                  endTime: "",
                  school: "",
                  major: "",
                  fullTime: ""
            })
            return
          }else{
            this.jbform.jiaoyubeijing=res.data.crmPersonnelEducationEntity
          }
            if(res.data.crmWorkExperienceEntity.length===0){
             this.jbform.gongzuojingli.push({
                  startTime: "",
                  endTime: "",
                  school: "",
                  major: "",
                  fullTime: ""
            })
            return
          }else{
            this.jbform.gongzuojingli=res.data.crmWorkExperienceEntity
          }
        })
    },
      // 处理时间的方法
    disposeDate (now) {
      var year = now.getFullYear(); //年
      var month = now.getMonth() + 1; //月
      var day = now.getDate(); //日

      if (String(month).length != 2) {
        month = 0 + String(month);
      }
      if (String(day).length != 2) {
        day = 0 + String(day);
      }

      return `${year}-${month}-${day}`;
    },
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar__right {
  img {
    width: 15px;
    height: 15px;
  }
}
.content {
  width: 100%;
  height: auto;
  overflow: hidden;
  background-image: url('../../assets/images/invite/zxjl.png');
  background-repeat: no-repeat;
  background-size: 100%;
  .btn {
    width: 70%;
    height: 52px;
    opacity: 1;
    background: linear-gradient(180deg, #6ce5e6, #4956f2);
    border-radius: 41px;
    text-align: center;
    line-height: 50px;
    margin: 20px auto;
  }
  .jibenmsg {
    padding: 10px;
    .jibenmsg-content {
      width: 100%;
      height: auto;
      background-color: #3556cd;
      line-height: 40px;
      margin: 260px auto;
      .title {
        color: #fff;
        width: 100%;
        height: auto;
        display: flex;
        margin-left: 10px;
        justify-content: space-between;
        .left {
          display: flex;
          span {
            font-size: 25px;
            margin-top: -2px;
          }
          h2 {
            padding-left: 6px;
            font-size: 18px;
          }
        }
        .zhankaiheshousuo {
          margin-right: 20px;

          span {
            img {
              width: 10px;
              height: 10px;
            }
          }
        }
      }
      .contents {
        width: 100%;
        height: auto;
        background-color: #fff;
      }
    }
    .jibenmsg-contents {
      width: 100%;
      height: auto;
      background-color: #3556cd;
      line-height: 40px;
      .title {
        color: #fff;
        width: 100%;
        height: auto;
        display: flex;
        margin-left: 10px;
        justify-content: space-between;
        margin-top: -245px;
        .left {
          display: flex;
          span {
            font-size: 25px;
            margin-top: -2px;
          }
          h2 {
            padding-left: 6px;
            font-size: 18px;
          }
        }
        .zhankaiheshousuo {
          display: flex;
          margin-right: 20px;
          .imgs {
            margin-right: 10px;
            span {
              img {
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }
      .contents {
        width: 100%;
        height: auto;
        background-color: #fff;
        .text {
          text-align: center;
          color: #3556cd;
        }
      }
    }
    .jibenmsg-contentss {
      width: 100%;
      height: auto;
      background-color: #3556cd;
      line-height: 40px;
      .title {
        color: #fff;
        width: 100%;
        height: auto;
        display: flex;
        margin-left: 10px;
        justify-content: space-between;
        margin-top: 15px;
        .left {
          display: flex;
          span {
            font-size: 25px;
            margin-top: -2px;
          }
          h2 {
            padding-left: 6px;
            font-size: 18px;
          }
        }
        .zhankaiheshousuo {
          margin-right: 20px;
          span {
            img {
              width: 10px;
              height: 10px;
            }
          }
        }
      }
      .contents {
        width: 100%;
        height: auto;
        background-color: #fff;
        .text {
          text-align: center;
          color: #3556cd;
        }
        .contents-formtitle {
          display: flex;
          justify-content: space-between;
          .van-radio {
            margin-top: 10px;
            margin-right: 10px;
          }
          h3 {
            margin-left: 10px;
          }
          .contents-left{
              width: 20%;
              img{
                  width:40px;
                  height: 50px;
                  display: block;
                  margin: 10px auto;
              }
          }
          .contents-center{
              width: 60%;
              margin-right: 40px;
              span{
                  display: block;
                  margin-top: 4px;
              }
              p{
                  color: #999;
                  margin-top: -8px;
                  font-size: 12px;
              }
          }
          .contents-right{
              margin-right: 20px;
              color:red;
              line-height: 60px;
              .van-icon{
                margin-top: 30px;
              }
          }
        }
        .contents-formMsg {
          padding: 10px;
          line-height: 30px;
          color: #666666;
          span {
            font-size: 13px;
          }
        }
      }
    }
    .jibenmsg-contentsss {
      width: 100%;
      height: auto;
      background-color: #3556cd;
      line-height: 40px;
      .title {
        color: #fff;
        width: 100%;
        height: auto;
        display: flex;
        margin-left: 10px;
        justify-content: space-between;
        margin-top: 15px;
        .left {
          display: flex;
          span {
            font-size: 25px;
            margin-top: -2px;
          }
          h2 {
            padding-left: 6px;
            font-size: 18px;
          }
        }
        .zhankaiheshousuo {
          display: flex;
          margin-right: 20px;
          .imgs {
            margin-right: 10px;
            span {
              img {
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }
      .contents {
        width: 100%;
        height: auto;
        background-color: #fff;
        .text {
          text-align: center;
          color: #3556cd;
        }
        .contents-formtitle {
          display: flex;
          justify-content: space-between;
          .van-radio {
            margin-top: 10px;
            margin-right: 10px;
          }
          h3 {
            margin-left: 10px;
          }
        }
        .contents-formMsg {
          padding: 10px;
          line-height: 30px;
          color: #666666;
          span {
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>